<template>
	<view class="content">
		<!-- 页面背景 -->
		<view class="page_back"></view>
		
		<u-navbar
			title="优惠劵"
			@leftClick="leftClick"
			:placeholder="true"
			:fixed="true"
			bgColor="transparent"
			:autoBack="true"
		>
		</u-navbar>
		
		<!-- 导航切换 -->
		<u-tabs 
			:list="tab_list"
			@click="tab_click"
			:current="current"
		 >
		</u-tabs>
		
		<view style="margin-top: 20upx;"></view>
		
		<block v-for="(item, index) in 4" :key="index" v-if="current == 0">
			<view class="counp_list_box">
				<view class="counp_box_img">
					<image class="counp_img" src="../../static/img/counp/counp_bak.png"></image>
				</view>
				
				<view class="counp_text_info_box">
					<view class="counp_box_money">
						<view class="counp_money">
							<text class="money1">￥</text>
							<text class="money2">20</text>
						</view>
						<view class="moeny_text_bac">每月订单可用</view>
					</view>
					
					<view class="counp_rig_box_x">
						<view class="counp_rig_box_text">
							<view class="counp_send_text">运费抵用卷</view>
							<view class="counp_send_text1">2021.07.30 - 2021—08-30</view>
						</view>
						<view class="counp_buton_box">使用</view>
					</view>
				</view>
			</view>
		</block>
		
		<!-- 优惠劵不可以使用 -->
		<block v-for="(item, index) in 4" :key="index" v-if="current == 1">
			<view class="counp_list_box">
				<view class="counp_box_img">
					<image class="counp_img" src="../../static/img/counp/counp_bak.png"></image>
				</view>
				
				<view class="counp_text_info_box">
					<view class="counp_box_money">
						<view class="counp_money">
							<text class="money1" style="color: #C5C5C5;">￥</text>
							<text class="money2" style="color: #C5C5C5;">20</text>
						</view>
						<view class="moeny_text_bac" >每月订单可用</view>
					</view>
					
					<view class="counp_rig_box_x">
						<view class="counp_rig_box_text">
							<view class="counp_send_text" >运费抵用卷</view>
							<view class="counp_send_text1">2021.07.30 - 2021—08-30</view>
						</view>
						<view class="counp_buton_box" style="background: #C5C5C5;">使用</view>
					</view>
				</view>
			</view>
		</block>
		
	</view>
</template>

<script>
	export default{
		data(){
			return{
				current:0,	//导航栏切换
				tab_list:[{
					name: "可使用",
				},{
					name: '不可使用',
				}]
			}
		},
		methods:{
			tab_click(e){
				this.current = e.index;
			},
			leftClick(e){
				console.log(e)
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style>
	.content{
		width: 100%;
		overflow-x: hidden;
	}
	.page_back{
		position: absolute;
		top: 0;
		width: 750upx;
		height: 904upx;
		background: linear-gradient(180deg, #6EC5FF 0%, rgba(167, 228, 255, 0) 100%);
		opacity: 0.11;
		z-index: -8;
	}
	.counp_list_box{
		margin-left: 16upx;
		width: 720upx;
		height: 208upx;
		/* background-color: #007AFF; */
		padding: 47upx 34upx 42upx 36upx;
		box-sizing: border-box;
		position: relative;
		z-index: 1;
	}
	.counp_box_img{
		width: 720upx;
		height: 208upx;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 2;
	}
	.counp_img{
		width: 720upx;
		height: 208upx;
	}
	.counp_text_info_box{
		display: flex;
		justify-content: space-between;
		z-index: 4;
		align-items: center;
		box-sizing: content-box;
	}
	.counp_box_money{
		width: 144upx;
		height: 120upx;
		text-align: center;
		z-index: 5;
	}
	.counp_money{
		width: 90upx;
		height: 90upx;
		/* display: flex;
		align-items: baseline;
		justify-content: center; */
		/* margin-left: 27upx; */
	}
	.money1{
		font-size: 32upx;
		font-family: DINAlternate-Bold, DINAlternate;
		font-weight: bold;
		color: #58BCFF;
	}
	.money2{
		font-size: 76upx;
		font-family: DINAlternate-Bold, DINAlternate;
		font-weight: bold;
		color: #58BCFF;
	}
	.moeny_text_bac{
		width: 144upx;
		height: 34upx;
		font-size: 24upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
	}
	.counp_rig_box_x{
		z-index: 5;
		width: 448upx;
		height: 80upx;
		display: flex;
		justify-content: space-between;
		/* background-color: #007AFF; */
		/* align-items: center; */
	}
	.counp_rig_box_text{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.counp_send_text{
		font-size: 28upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}
	.counp_send_text1{
		font-size: 24upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
	}
	.counp_buton_box{
		width: 120upx;
		height: 56upx;
		background: #58BCFF;
		border-radius: 30upx;
		
		/* width: 48px;
		height: 24px; */
		font-size: 24upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
